<template>
    <div class="menu-container">
        <div>
            <el-button type="primary" @click="dialogVisible=true">新增菜单</el-button>
        </div>
        <el-table

            class="table-box"
            :data="routeDatas"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
        >
            <el-table-column prop="displayName" label="菜单名称" sortable />
            <el-table-column prop="menuTag" label="菜单标签" />
            <el-table-column prop="url" label="菜单路由地址" />
            <el-table-column prop="icon" label="字符图标" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small"
                               @click="handleEdit(scope.$index, scope.row)"
                    >Edit</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <MenuDialog @hanldeRequest="getMenuList" :type="editType" :editObject="editObject" v-model:dialogVisible="dialogVisible" :routeDatas="routeDatas"/>
    </div>
</template>

<script setup>
import MenuDialog from "./components/MenuDialog.vue"
import { reactive, ref, watch } from 'vue'
import {apiRoleMenusGetMenusList} from "@/api/roleMenus"
import {convertToTree} from "@/utils/tools"
import {apiMenuDelete} from "@/api/menu"
import {omit} from "lodash-es"
import store from "@/store/index"
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
  name: "Menu",
});

const dialogVisible = ref(false);
const editType = ref('add');
const editObject = ref(null);

const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const routeDatas = ref([]);

function addMenu() {
  editType.value = 'add';
  editObject.value = null;
}

function getSortList(datas) {

  const res = [];
  datas.forEach((v) => {
    if (v.children) {
      v.children = getSortList(v.children);
      res.push(v);
    } else {
      res.push(v);
    }
  });

  return res.sort((v1, v2) => {
    return parseInt(v1?.order ?? 0) - parseInt(v2?.order ?? 0);
  });

}

async function getMenuList() {
  const res = await apiRoleMenusGetMenusList()
  routeDatas.value = getSortList(convertToTree(res?.items ?? []))
}

function handleEdit(index,row) {
  editType.value = 'edit';
  editObject.value = omit(row,['extraProperties','children']) ;
  dialogVisible.value = true;
}

function handleDelete(index,row) {


  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {

      apiMenuDelete([row.id])

      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })


  // store.dispatch("user/resetToken");
}

getMenuList()

</script>

<style lang="scss" scoped>
.menu-container {

  padding: 20px;
}
.table-box {
  margin-top: 10px;
}
</style>